<style>
  .content-box {
    padding: 20px;
  }
  .check_box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }
  
  .check_title {
    font-size: 18px;
    font-weight: bold;
    width: 100px;
    display: flex;
    flex-shrink: 0;
  }
  
  .btn-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .address-item {
    height: 25px;
    line-height: 25px;
    background: #EEF2F2;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;
    padding: 0 10px;
  }
  
  .address-active {
    color: #6071EB;
    outline: 1px solid #818FEE;
  }
  
  .select-box {
      display: flex;
      align-items: center;
      padding: 16px 0;
      background-color: white;
  }
  
  .select-item {
      font-size: 15px;
      font-weight: 400;
      color: #4D4D4D;
      padding: 3px 10px;
      background-color: #FFF;
      border-radius: 4px;
      margin-left: 10px;
      cursor: pointer;
  }
  
  .active-item {
      color: #FFFFFF;
      background-color: #4B5BDE;
  }
  
  .select {
      width: 120px;
      height: 31px;
      border-color: #D2D6DE;
      margin-right: 10px;
  }
  
  #distributor {
      height: 31px;
  }
  
  .search_distributor {
      background-color: #4A5BDD;
      color: white;
      height: 31px;
      line-height: 31px;
      width: 60px;
      text-align: center;
  }
  
  .all_title{
      text-align: center;
      font-size: 18px;
  }
  .all_num{
      text-align: center;
      font-size: 32px;
  }
  
  .type-item {
      width: 110px;
      height: 34px;
      line-height: 34px;
      background: #EEF2F2;
      border-radius: 5px;
      margin-right: 20px;
      text-align: center;
      cursor: pointer;
  }
  
  .type-active {
      color: #6071EB;
      outline: 1px solid #818FEE;
  }
</style>

<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">

<div class="panel panel-default panel-intro">
    {:build_heading()}
    <div id="search">
      <div class="content-box">
        <div class="check_box">
          <div class="check_title">按省查：</div>
          <div class="btn-box">
            <div class="address-item" :class="currentProvinceIndex == index ? 'address-active' : ''" v-for="(item,index) in provinceList"
             :key="index" @click="selectProvince(index,item.id,item.name)">{{item.name}}</div>
          </div>
        </div>
        <div class="check_box" v-if="cityList && cityList.length > 0">
          <div class="check_title">按市查：</div>
          <div class="btn-box">
            <div class="address-item" :class="currentCityIndex == index ? 'address-active' : ''" v-for="(item,index) in cityList"
             :key="index" @click="selectCity(index,item.id,item.city)">{{item.city}}</div>
          </div>
        </div>
        <div class="check_box" v-if="regionList && regionList.length > 0">
          <div class="check_title">按区/县查：</div>
          <div class="btn-box">
            <div class="address-item" :class="currentRegionIndex == index ? 'address-active' : ''" v-for="(item,index) in regionList"
             :key="index" @click="selectRegion(index,item.id,item.region)">{{item.region}}</div>
          </div>
        </div>
        <div class="check_box" style="align-items: center;">
          <div class="check_title">按学校查：</div>
          <div style="width: 200px;">
            <el-input
              placeholder="输入学校名字搜索"
              prefix-icon="el-icon-search"
              @change="searchSchool"
              v-model="schoolKey">
            </el-input>
          </div>
        </div>
      </div>
      
      <div style="display: flex;flex-direction: column;">
        <div class="select-box">
            <div style="width: 450px;display: flex;align-items: center; margin-left: 20px;">
                <div style="color: #838989;width: 80px;">发行时间</div>
                <el-date-picker
                        size="small"
                        v-model="date"
                        prefix-icon="el-icon-date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right"
                        @change="changeDate">
                </el-date-picker>
            </div>
            <div style="color: #838989;margin-left: 20px;">年份</div>
            <div style="margin-left: 20px;">
                <el-select size="small" v-model="year" placeholder="请选择合作年份" @change="changeYear">
                    <el-option
                            v-for="(item,index) in yearList"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </div>
            <div style="color: #838989;margin-left: 20px;">渠道主体</div>
            <div class="select-item distributor_type" :class="currentChannel == index ? 'active-item' : ''" @click="selectChannel(index)"
                 v-for="(item,index) in channelList" :key=index>{{item}}</div>
        </div>
        <div class="select-box">
            <div style="color: #838989;margin-left: 20px;">身份</div>
            <div style="margin-left: 20px;">
                <el-select size="small" v-model="identity" placeholder="请选择身份" @change="changeIdentity">
                    <el-option
                            v-for="(item,index) in identityList"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </div>
            <div style="color: #838989;margin-left: 20px;">性别</div>
            <div style="margin-left: 20px;">
                <el-select size="small" v-model="sex" placeholder="请选择性别" @change="changeSex">
                    <el-option
                            v-for="(item,index) in sexList"
                            :key="index"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </div>
            <div style="color: #838989;margin-left: 20px;">考试类型</div>
            <div class="select-item distributor_type" :class="currentType == index ? 'active-item' : ''" @click="selectType(index,item)"
                 v-for="(item,index) in typeList" :key=index>{{item}}</div>
        </div>
      </div>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
<!--                        {:build_toolbar('refresh,edit,del')}-->
                        <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                            <ul class="dropdown-menu text-left" role="menu">
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                            </ul>
                        </div>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('user/user/edit')}"
                           data-operate-del="{:$auth->check('user/user/del')}"
                           width="100%">
                    </table>
                </div>
            </div>
    
        </div>
    </div>
</div>